Thiết lập Website tĩnh với Amazon S3 và Amazon CloudFront

Trong bài viết này mình sẽ giới thiệu 1 cách cơ bản về cách xây dựng 1 trang web tĩnh với Amazon S3 và Amazon CloudFront.

Có thể nói host trang web tĩnh là 1 trong những đặc trưng nổi bật của Amazon S3. Cùng tìm hiểu nhé!

I. Amazon S3

• Amazon S3 viết tắt của cụm từ Amazon Simple Storage Service. Là một dịch vụ lưu trữ dữ liệu dưới dạng Object thông qua giao diện dịch vụ web. Amazon S3 được xây dựng để lưu trữ và truy xuất bất kỳ lượng dữ liệu nào từ mọi nơi - các trang web và các ứng dụng di động, ứng dụng doanh nghiệp và dữ liệu từ các cảm biến hoặc thiết bị IoT.
• Bạn có thể lưu trữ bất kỳ loại tệp nào trong S3.
• S3 được thiết kế để mang lại độ bền 99.999999999% và lưu trữ dữ liệu cho hàng triệu ứng dụng được sử dụng bởi các công ty đứng đầu thị trường trong mọi ngành công nghiệp.
• S3 cung cấp khả năng bảo mật toàn diện, đáp ứng ngay cả những quy định nghiêm ngặt nhất.
• ...
• Các trường hợp sử dụng điển hình bao gồm: • Sao lưu và lưu trữ - Cung cấp dịch vụ lưu trữ và sao lưu dữ liệu. • Application hosting - Cung cấp các dịch vụ triển khai, cài đặt và quản lý các ứng dụng web. • Media Hosting - Xây dựng cơ sở hạ tầng dự phòng, có thể mở rộng và có tính sẵn sàng cao, lưu trữ video, hình ảnh, hoặc âm nhạc. • Host Trang web tĩnh - bạn có thể định cấu hình trang web tĩnh để chạy từ nhóm S3.

Giả sử bạn đã có trong tay 1 project web tĩnh. Những bước sau đây sẽ giúp bạn đưa trang web lên Amazon S3 một cách đơn giản và tiện lợi

1. Chọn Region:

Chọn Region AWS hỗ trợ Amazon S3, trong trường hợp này, ở đây mình chọn Asia Pacific (Tokyo) ap-northeast-1

 

2. Tạo S3 bucket

Chú ý: Bucket cần có 1 "globally unique name", tức là tên bucket của bạn phải là duy nhất trên phạm vi toàn cầu, không trùng lặp với tên bucket nào đã có sẵn.

3. Upload trang web

Kéo thả toàn bộ file trong project của bạn vào S3 Bucket. Nhấn Upload

4. Thêm bucket policy cho phép quyền truy cập public

• Trong bảng điều khiển S3, chọn tên bucket vừa tạo,
• Chọn Permissions
• Ở mục Block public access, bỏ check Block all public access. Rồi Save

5. Chỉnh sửa Bucket Policy

Thêm đoạn code sau vào Bucket policy editor. Và Save

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
 Với phần arn:aws:s3:::[YOUR_BUCKET_NAME] chính là tên ARN (Amazon Resource Name) ứng với bucket của bạn 

6. Cấp quyền host trang web

• Trong bảng điều khiển S3, chọn Properties
• Chọn Static website hosting
• Chọn Use this bucket to host a website
• Tại mục Index document, nhập index.html
• Save

7. Truy cập trang web

• Tại mục trên, bạn cũng có thể thấy dòng Endpoint. Ở đây là:

http://your-bucket-name.s3-website-ap-northeast-1.amazonaws.com

• Truy cập Endpoint của bạn từ đường link bất kì. Ta có thể thấy trang web đã được đưa lên internet thành công.

 

Rất đơn giản và tiện lợi, đúng với cái tên Simple Storage Service"

Tiếp theo chúng ta hãy cùng chuyển tới thiết lập CloudFront

II. Amazon CloudFront

• Amazon CloudFront là mạng phân phối nội dung (Content Delivery Network - CDN) cho phép bạn lưu trữ (cache) nội dung của bạn tại “Edge Locations" tại các địa điểm trên toàn thế giới. Điều này cho phép khách hàng truy cập nội dung nhanh hơn và cung cấp bảo mật chống lại các cuộc tấn công DDoS.
• Có thể hiểu đơn giản, Edge Locations là những trung tâm lưu trữ đóng vài trò bộ nhớ cache cho trang web của bạn, chúng được phân phối khắp thế giới. Khi người dùng từ 1 nơi bất kì truy cập tới trang web của bạn thông qua 1 link URL, thay vì phải liên kết tới nơi gốc lưu trang web của bạn, Amazon CloudFront sẽ cache nội dung trang web đó vào Edge Locations gần nhất với người dùng đó. Và từ lần truy cập thứ 2, bạn sẽ có được tốc độ truy cập nhanh chóng.
• Origins: Chính là nơi gốc lưu trang web của bạn. Nội dung từ đây sẽ được Amazon CloudFront phân phối đi khắp nơi trên thế giới.
• Distributions: Để có thể thiết lập CloudFront kết nối với Origin, bạn cần thiết lập 1 Distributions. Có 2 loại Distributions: Web Distribution và RTMP Distribution. Trong bài viết này chúng ta sẽ sử dụng Web Distribution.

Cùng bắt đầu cài đặt nào

Tại bảng điều khiển CloudFront, chọn Create Distribution. Tiếp theo ở mục Delivery method, chọn Web.

Chú ý, ở mục Origin Domain Name, chúng ta cần copy endpoint phía trên và paste vào đây. Các mục khác chúng ta có thể để default. Sau đó nhấn Create Distribution

Sau khi distribution được tạo thành, bạn có thể truy cập trang web từ domain của Amazon CloudFront. Với những trang web lớn, bạn sẽ thấy sự cải thiện tốc độ phản hồi rõ rệt.

Ngoài ra, Amazon CloudFront có những đặc tính sau mà bạn có thể tìm hiểu thêm để sử dụng với trang web của mình:

• Invalidation: Sử dụng để force update content trên S3 Bucket của bạn. Mặc định, CloudFront sẽ cache những thay đổi của S3 bucket sau 24 giờ (TTL=86400s). Vì vậy nếu bạn muốn thay đổi nội dung file, thêm, sửa, xoá file trong S3 bucket và muốn có hiệu quả ngay, bạn có thể sử dụng Invalidation để force update. Tuy nhiên việc này không được khuyến khích làm thường xuyên vì sẽ mất phí và không đảm bảo tính nhất quán của hệ thống.

• Thêm Cname cho Bucket URL: Mặc dù bạn đã có tên miền từ CloudFront, bạn vẫn có thể làm cho trang web trở nên chuyên nghiệp hơn bằng việc mua tên miền riêng của mình và thiết lập nó trỏ tới trang web của bạn. Bạn có thể thiết lập nó tại Distribution Settings

Kết luận

Vậy là chúng ta đã nắm được cơ bản cách thiết lập 1 trang web tĩnh với Amazon S3 và Amazon CloudFront. Rất đơn giản, tiện dụng và đặc biệt là chi phí rất nhỏ. Bạn chỉ trả cho những gì bạn sử dụng.

Bạn có thể tham khảo giá của Amazon S3 và Amazon CloudFront tại đây:

• https://aws.amazon.com/vi/s3/pricing/
• https://aws.amazon.com/vi/cloudfront/pricing/

Xin chào và hẹn gặp lại!